import { reactive, h } from 'vue';
import { AppMobListExpBarProps, IAppExpBarCtrlController } from 'ibz-core';
import { CtrlComponentBase } from './ctrl-component-base';

export class ExpBarCtrlComponentBase<
  Props extends AppMobListExpBarProps,
> extends CtrlComponentBase<AppMobListExpBarProps> {
  /**
   * 部件控制器
   *
   * @protected
   * @memberof ExpBarCtrlComponentBase
   */
  protected c!: IAppExpBarCtrlController;

  /**
   * @description 初始化响应式属性
   * @memberof ExpBarCtrlComponentBase
   */
  public initReactive() {
    super.initReactive();
    this.c.selection = reactive(this.c.selection);
  }

  /**
   * @description 渲染多数据部件
   * @return {*}
   * @memberof ExpBarCtrlComponentBase
   */
  public renderXDataControl() {
    if (this.c.xDataControl) {
      const otherParams = { expMode: true };
      return this.computeTargetCtrlData(this.c.xDataControl, otherParams);
    }
  }

  /**
   * @description 渲染导航视图
   * @return {*}
   * @memberof ExpBarCtrlComponentBase
   */
  public renderNavView() {
    if (this.c.selection) {
      const { viewComponent, navContext, navParam } = this.c.selection;
      if (viewComponent) {
        return h(viewComponent, {
          navContext: navContext,
          navParam: navParam,
          viewPath: navContext?.viewpath,
        });
      }
    }
  }

  /**
   * @description 渲染导航栏部件
   * @return {*}
   * @memberof ExpBarCtrlComponentBase
   */
  render() {
    if (!this.controlIsLoaded.value) {
      return null;
    }
    const { width, height } = this.c.controlInstance;
    const controlStyle = {
      width: width ? width + 'px' : '',
      height: height ? height + 'px' : '',
    };
    return (
      <div class={{ 'exp-bar': true, ...this.classNames }} style={controlStyle}>
        <div class='exp-bar-container'>
          <div class='container__multi_data_ctrl'>{this.renderXDataControl()}</div>
          <div class='container__nav_view'>{this.renderNavView()}</div>
        </div>
      </div>
    );
  }
}
